<template>
  <div>
    <el-col :offset="9" :span="8">
      <el-input v-model="addTeacherInfo.name" placeholder="教师姓名"></el-input>
      <el-input v-model="addTeacherInfo.jobTitle" placeholder="教师职称"></el-input>
      <el-input v-model="addTeacherInfo.salary" placeholder="教师工资" type="number"></el-input>
      <el-input v-model="addTeacherInfo.id" placeholder="教师工号" type="number"></el-input>
      <el-button type="primary" @click="addTeacher">添加教师</el-button>
    </el-col>
    <el-table :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" :data="teachers"
      style="width: 100%">
      <el-table-column prop="name" label="教师姓名"></el-table-column>
      <el-table-column prop="id" label="教师工号"></el-table-column>
      <el-table-column prop="jobTitle" label="职称"></el-table-column>
      <el-table-column prop="salary" label="工资"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="editTeacher(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteTeacher(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-button @click="calculateStatistics" type="success">展示统计信息</el-button>

    <div v-if="statistics" class="statistics">
      <p>不同职称的教师数量：</p>
      <ul>
        <li v-for="(item, index) in statistics" :key="index">{{ item.jobTitle }}: {{ item.count }}</li>
      </ul>
      <el-divider></el-divider>
      <p>不同职称的教师平均工资：</p>
      <ul>
        <li v-for="(item, index) in statistics" :key="index">{{ item.jobTitle }}: {{ item.avgSalary }}</li>
      </ul>
    </div>
  </div>
  <el-dialog v-model="dialogTeacherInfoVisible" title="修改教师信息" width="40%" top="20vh" center>
    <el-form :model="editTeacherInfo" label-width="100px" ref="form">
      <el-form-item label="教师姓名" prop="name">
        <el-input v-model="editTeacherInfo.name" placeholder="请输入教师名称"></el-input>
      </el-form-item>
      <el-form-item label="教师职称" prop="jobTitle">
        <el-input v-model="editTeacherInfo.jobTitle" placeholder="请输入教师职称"></el-input>
      </el-form-item>
      <el-form-item label="教师工资" prop="salary">
        <el-input v-model="editTeacherInfo.salary" placeholder="请输入任课教师工资"></el-input>
      </el-form-item>
      <el-form-item label="教师工号" prop="id">
        <el-input v-model="editTeacherInfo.id" placeholder="请输入教师工号"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogTeacherInfoVisible = false">取消修改</el-button>
        <el-button type="primary" @click="handleEdit()">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getAllTeacherInfoService, addTeacherInfoService, deleteTeacherInfoService, updateTeacherInfoService, getTeacherTotalService } from '@/api/manager.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogTeacherInfoVisible = ref(false);
const teachers = ref([]);
const addTeacherInfo = reactive({
  id: '',
  name: '',
  jobTitle: '',
  salary: ''
});

//展示所有老师信息
const getAllTeacherInfo = async () => {
  const res = await getAllTeacherInfoService()
  teachers.value = res.data
}
getAllTeacherInfo()

const addTeacher = async () => {
  if (addTeacherInfo.id && addTeacherInfo.name && addTeacherInfo.jobTitle && addTeacherInfo.salary) {
    await addTeacherInfoService(addTeacherInfo)
    getAllTeacherInfo()
    ElMessage.success('添加成功!')
    addTeacherInfo.id = ''
    addTeacherInfo.name = ''
    addTeacherInfo.jobTitle = ''
    addTeacherInfo.salary = ''
  } else {
    ElMessage.error('请填写完整信息!')
  }
};
const editTeacherInfo = reactive({
  id: '',
  name: '',
  jobTitle: '',
  salary: ''
})
const editTeacher = async (teacher) => {
  dialogTeacherInfoVisible.value = true;
  editTeacherInfo.id = teacher.id;
  editTeacherInfo.name = teacher.name;
  editTeacherInfo.jobTitle = teacher.jobTitle;
  editTeacherInfo.salary = teacher.salary;
};
const handleEdit = async () => {
  if (editTeacherInfo.id && editTeacherInfo.name && editTeacherInfo.jobTitle && editTeacherInfo.salary) {
    await updateTeacherInfoService(editTeacherInfo)
    getAllTeacherInfo()
    ElMessage.success('修改成功!')
    dialogTeacherInfoVisible.value = false;
  } else {
    ElMessage.error('请填写完整信息!')
  }
}
const deleteTeacher = async (teacher) => {
  await ElMessageBox.confirm('你确认要删除该教师么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await deleteTeacherInfoService(teacher.id)
  getAllTeacherInfo()
  ElMessage.success('删除成功!')
};
const statistics = ref();
const calculateStatistics = async () => {
  const res = await getTeacherTotalService()
  statistics.value = res.data.jobTitleStatistics
};
</script>

<style scoped lang="scss">
.el-input {
  margin: 10px 0;
}

.statistics {
  ul {
    margin-left: 800px;
  }

  p {
    font-weight: bold;
    margin-left: 800px;
  }

  padding-bottom: 200px;
}

:deep(.el-form-item__label) {
  padding: 9px 12px 0 0
}
</style>